<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.sx.pojo.OptionRecords" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>操作记录列表</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- 引入 SweetAlert2 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
    <!-- 引入 DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <style>
        /* 整体页面背景设置为更柔和的天蓝色调，营造简洁科技感 */
        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: #eaf3f9;
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果 */
        .main-container {
            width: 90%;
            margin: 50px auto;
            padding: 40px;
            background-color: #f8f9fa;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }

        /* 标题样式，字体大小、加粗、颜色及下边距 */
        h1 {
            font-size: 36px;
            font-weight: bold;
            color: #1976D2;
            margin-bottom: 30px;
        }

        /* 筛选表单样式，调整整体布局更紧凑合理 */
        .filter-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .filter-form label {
            font-weight: bold;
            margin-bottom: 5px;
            min-width: 100px;
        }

        .filter-form input, .filter-form select {
            margin-bottom: 15px;
            width: 100%;
            max-width: 200px;
        }

        /* 自定义下拉菜单样式 */
        .filter-form select {
            appearance: none;
            background-color: #fff;
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2F%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            padding: 0.375rem 1.75rem 0.375rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .filter-form select:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .filter-form button {
            margin-bottom: 0;
            width: auto;
        }

        /* 表格容器，设置相对定位方便内部元素定位 */
        .table-container {
            position: relative;
            overflow-x: auto;
        }

        /* 表格样式，紧凑布局、边框、背景色及文本颜色 */
        table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #e0e0e0;
            background-color: #f9f9f9;
            color: #333;
        }

        /* 表头样式，背景色、文字颜色、内边距、边框及轻微阴影 */
        thead th {
            background-color: #1976D2;
            color: white;
            padding: 18px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            text-align: center;
        }

        /* 表格数据单元格样式，内边距、边框及鼠标悬停时的背景色变化 */
        tbody td {
            padding: 18px;
            border: 1px solid #e0e0e0;
            transition: background-color 0.3s ease;
            font-size: 18px;
            text-align: center;
        }

        tbody td:hover {
            background-color: #e6e6e6;
        }

        /* 偶数行变色效果 */
        tbody tr:nth-child(even) {
            background-color: #f5f5f5;
        }

        /* 操作列样式（如果后续还有其他操作按钮可在这里统一调整样式） */
        .operation {
            text-align: center;
        }

        /* 添加按钮样式，与整体风格协调，深蓝色背景 */
        .add-button {
            display: inline-block;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-size: 18px;
            color: white;
            background-color: #1565C0;
            transition: background-color 0.3s ease;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .add-button:hover {
            opacity: 0.8;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }
    </style>
</head>
<body>
<div class="main-container">
    <h1>操作记录列表</h1>
    <form action="optionRecord.action?action=listN" method="post" class="filter-form" onsubmit="return false">
        <div class="col-md-2">
            <div class="form-group">
                <label for="startDate">开始时间:</label>
                <input type="datetime-local" class="form-control" id="startDate" name="startDate">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="endDate">结束时间:</label>
                <input type="datetime-local" class="form-control" id="endDate" name="endDate">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="operatorName">操作人:</label>
                <select class="form-control" id="operatorName" name="operatorName">
                    <option value="">全部</option>
                    <c:forEach items="${operatorList}" var="operator">
                        <option value="${operator.id}">${operator.id} - ${operator.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="operationType">操作类型:</label>
                <select class="form-control" id="operationType" name="operationType">
                    <option value="">全部</option>
                    <option value="1">添加</option>
                    <option value="2">修改</option>
                    <option value="3">删除</option>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="tableType">操作表类型:</label>
                <select class="form-control" id="tableType" name="tableType">
                    <option value="">全部</option>
                    <option value="1">商品表</option>
                    <option value="2">用户表</option>
                    <option value="3">供应商表</option>
                    <option value="4">商品种类表</option>
                    <option value="5">销售表</option>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary">筛选</button>
            <a href="optionRecord.action?action=list" class="btn btn-secondary">重置</a>
        </div>
    </form>
    <div class="table-container">
        <table id="optionRecordsTable">
            <thead>
            <tr>
                <th>操作记录 ID</th>
                <th>操作前数据</th>
                <th>操作后数据</th>
                <th>操作人 ID</th>
                <th>操作人姓名</th>
                <th>操作时间</th>
                <th>操作类型</th>
                <th>操作表类型</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${optionRecordsList}" var="optionRecord">
                <tr>
                    <td>${optionRecord.id}</td>
                    <td>${optionRecord.beOption}</td>
                    <td>${optionRecord.afOption}</td>
                    <td>${optionRecord.personId}</td>
                    <td>${optionRecord.personName}</td>
                    <td><fmt:formatDate value="${optionRecord.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                    <td>
                        <c:choose>
                            <c:when test="${optionRecord.flag == 1}">添加</c:when>
                            <c:when test="${optionRecord.flag == 2}">修改</c:when>
                            <c:when test="${optionRecord.flag == 3}">删除</c:when>
                        </c:choose>
                    </td>
                    <td>
                        <c:choose>
                            <c:when test="${optionRecord.type == 1}">商品表</c:when>
                            <c:when test="${optionRecord.type == 2}">用户表</c:when>
                            <c:when test="${optionRecord.type == 3}">供应商表</c:when>
                            <c:when test="${optionRecord.type == 4}">商品种类表</c:when>
                            <c:when test="${optionRecord.type == 5}">销售表</c:when>
                        </c:choose>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入 SweetAlert2 的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<!-- 以下引入 DataTables 的 JavaScript 代码可以删除，因为不再需要其分页等相关功能了 -->
<!-- <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> -->
</body>
</html>